<!-- 账号密码登录组件 -->
<template>
  <div class="login">
    <div class="user-login-box">
      <div class="user-login">
        <div class="user-login-head">
          <router-link to="/" class="iconfont icon-fanhui1"></router-link>
          <h1>用户登录</h1>
        </div>
        <div class="user-login-ul">
          <div class="form-item">
            <div class="form-item_content">
              <div class="item-input">
                <div class="label">
                  <i class="iconfont icon-zhanghao-copy"></i>
                </div>
                <div class="value">
                  <div class="input input-username">
                    <input
                      type="text"
                      placeholder="请输入您的用户名"
                      v-model="username"
                    />
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="form-item">
            <div class="form-item_content">
              <div class="item-input">
                <div class="label">
                  <i class="iconfont icon-mimasuo01"></i>
                </div>
                <div class="value">
                  <div class="input input-password">
                    <input
                      type="password"
                      placeholder="请输入登录密码"
                      v-model="password"
                    />
                  </div>
                </div>
                <i class="iconfont icon-mimakejian1"></i>
              </div>
            </div>
          </div>
          <div class="operation">
            <a href="javascript:;" class="new-register">新用户注册</a>
            <a href="javascript:;" class="list-password">忘记密码?</a>
          </div>
        </div>
        <button type="button" class="btn" @click="login">登录</button>
      </div>
      <div class="mess-login">
        <router-link to="/phonelogin" tag="a">
          短信验证码登录
          <i class="iconfont icon-fanhui2"></i>
        </router-link>
      </div>
    </div>
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';

export default {
  //import引入的组件需要注入到对象中才能使用
  components: {},
  data() {
    //这里存放数据
    return {
      username: "",
      password: "",
    };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    login() {
      this.$store.dispatch("ActChangeIsLogin", {
        username: this.username,
        password: this.password,
      });
      this.$router.push("/person");
    },
  },
};
</script>
<style lang="less">
.login {
  background: #fff;
  width: 100%;
  height: 100%;
  position: fixed;
  .user-login-box {
    box-sizing: border-box;
    height: 100%;
    padding: 1.1rem;
    .user-login {
      .user-login-head {
        position: relative;
        margin-top: 1rem;
        .icon-fanhui1 {
          color: #bdbdbd;
          font-size: 1.8rem;
        }
        h1 {
          font-size: 2.6rem;
          margin-top: 3.5rem;
          line-height: 1.1;
          font-weight: 500;
        }
      }
      .user-login-ul {
        margin-top: 2.5rem;
        overflow: hidden;
        .form-item {
          .form-item_content {
            line-height: 40px;
            position: relative;
            font-size: 14px;
            .item-input {
              display: flex;
              border-bottom: 1px solid #ddd;
              overflow: hidden;
              padding: 0.8rem 0;
              position: relative;
              font-size: 1.5rem;
              .label {
                min-width: 2rem;
                height: 2.4rem;
                line-height: 2.4rem;
                .iconfont {
                  color: #bdbdbd;
                  margin-right: 0.5rem;
                  font-size: 1.5rem;
                }
              }
              .value {
                width: 100%;
                height: 2.4rem;
                line-height: 2.4rem;
                .input {
                  display: block;
                  width: 100%;
                  position: relative;
                  input {
                    border: 0;
                    box-sizing: border-box;
                    width: 100%;
                    color: #666;
                    font-size: 1.4rem;
                    padding: 0 1rem 0 0;
                    outline: 0;
                    transition: border-color 0.2s
                      cubic-bezier(0.645, 0.045, 0.355, 1);
                    background: none;
                    &::-webkit-input-placeholder {
                      color: #bdbdbd;
                    }
                  }
                }
              }
              .icon-mimakejian1 {
                position: absolute;
                right: 0.5rem;
                font-size: 1.7rem;
                color: #bdbdbd;
              }
            }
          }
        }
        .operation {
          display: flex;
          justify-content: space-between;
          margin: 0.5rem 0 0;
          .new-register,
          .list-password {
            font-size: 1.3rem;
            line-height: 2;
            color: #4b89dc;
          }
        }
      }
      .btn {
        margin-top: 2rem;
        border-radius: 0.5rem;
        background: #f92028;
        font-size: 1.2rem;
        color: #fff;
        border: 0;
        text-align: center;
        padding: 1rem 0;
        width: 100%;
        display: block;
        outline: none;
      }
    }
    .mess-login {
      margin-top: 3.5rem;
      a {
        width: 100%;
        display: block;
        text-align: center;
        font-size: 1.4rem;
        color: #f92028;
        font-weight: 500;
        .icon-fanhui2 {
          margin-left: 0.5rem;
          font-size: 1.3rem;
        }
      }
    }
  }
}
</style>